<template>
  <div class="body">
    <div class="container">
      <div class="ass">
        <el-select class="ass1" v-model="name" placeholder="请选择省份" @change="handleProvinceChange">
          <el-option v-for="item in province" :key="item.adcode" :label="item.name" :value="item.name">
          </el-option>
        </el-select>

        <el-select class="ass2" v-model="name1" placeholder="请选择市区" @change="changeClick">
          <el-option v-for="item in city" :key="item.adcode" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
        <el-button @click="handleSelect" :disabled="canClick">筛选</el-button>
      </div>

      <div class="hot" v-if="showBox">
        <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox>
        <div style="margin: 15px 0;"></div> -->
        <el-checkbox-group v-model="checkedHotList" @change="handleCheckedChange">
          <el-checkbox v-for="rm in hotList" :label="rm" :key="rm.sceneID">{{ rm.scene }}</el-checkbox>
        </el-checkbox-group>
      </div>

      <div class="suck">
        <el-select class="sucker" v-model="value" placeholder="请选择你要筛选的项目" @change="changeShow">
          <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <el-input class="inp1" placeholder="请输入您想要游玩的天数" v-model="input1" @change="changeInput1" clearable></el-input>
      </div>

    </div>

    <div class="result" v-if="showAttr">
      <div v-for="(item, index) in selectSceneResult" :key="index" class="childResult" @click="enterDetail(index)">
        <div class="pic" :style="{ backgroundImage: 'url(' + item.img +')'}">
        </div>
        <div class="spacer"></div>
        <div class="text">
          <h2>
            {{ item.name }}
          </h2>
          <i class="el-icon-map-location"></i>{{ item.city }}
          <P></P>
          <i class="el-icon-position"></i>{{ item.position }}
        </div>
      </div>
    </div>
    <div class="result" v-else>
      <div v-for="(item, index) in selectSchemeResult" :key="index" class="childResult" @click="enterDetail(index)">
        <div class="spacer1"></div>
        <div class="text1">
          <p>
            旅游方案{{ index + 1 }}
          </p>
        </div>
        <div class="spacer2"></div>
      </div>
    </div>
  </div>
</template>
<script>

import axios from 'axios';

export default {
  data() {
    return {
      userId: this.$route.params.userId,
      txUrl:
        "",
      userName: "",
      province: [],
      city: [],
      option: [
        {
          value: '0',
          label: '景点'
        },
        {
          value: '1',
          label: '旅游方案'
        }
      ],
      showBudget: "hidden",
      showBox: false,
      showAttr: true,
      canClick: true,
      hotList: [],
      checkedHotList: [],
      checkAll: false,
      isIndeterminate: true,
      name: '',
      name1: '',
      city: '',
      value: '',
      input: '',
      input1: '',
      box: '',
      selectSceneResult: [],
      selectSchemeResult: [],
    };
  },

  methods: {
    hqy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/userMessage/get",
        headers: {
          "Content-Type": "application/json",
          "token": localStorage.getItem("JWT_TOKEN"),
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          _this.userName = response.data.data.username;
          _this.txUrl = response.data.data.txUrl;
          const param1 = _this.userId;
          const param2 = _this.txUrl;
          const param3 = _this.$route.name;
          const param4 = _this.userName;
          _this.$emit("childEvent", { param1, param2, param3, param4 });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    async handleProvinceChange() {
      //省份改变时，清空市区选择框和输入框的内容
      this.name1 = '';
      this.input1 = '';
      let config =
      {
        method: 'get',
        maxBodyLength: Infinity,
        url: 'https://restapi.amap.com/v3/config/district?key=15db71050eb2c5659a33248b052f6fd8&keywords=' + this.name,
        headers: {}
      };
      await axios.request(config)
        .then((response) => {
          var that = response.data;
          this.city = that.districts[0].districts
        })
        .catch((error) => {
          console.log(error);
        });
      if (this.name != '' && this.name1 != '' && this.value == 0) {
        this.canClick = false;
      }
      if (this.name != '' && this.name1 != '' && this.value == 1 && this.input != '' && this.box != '') {
        this.canClick = false;
      }

    },

    // handleCheckAllChange(val) {
    //     this.checkedCities = val ? this.hotList : [];
    //     this.isIndeterminate = false;
    // },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.hotList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.hotList.length;
      this.box = value;
      //console.log(this.box);
      if (this.name != '' && this.name1 != '' && this.value == 1 && this.box.length != 0 && this.input1 != '') {
        this.canClick = false;
      }
      else {
        this.canClick = true;
      }
    },

    changeClick() {
      if (this.name != '' && this.name1 != '' && this.value == 0) {
        this.canClick = false;
      }
      if (this.name != '' && this.name1 != '' && this.value == 1 && this.input != '' && this.box.length != 0) {
        this.canClick = false;
      }
      if (this.name1 == '北京城区' || this.name1 == '上海城区' || this.name1 == '天津城区' || this.name1 == '重庆城区' || this.name1 == '重庆郊县') {
        this.city = this.name1.substring(0, this.name1.length - 2);
        //console.log(this.city);
      }
      else {
        this.city = this.name1.substring(0, this.name1.length - 1);
        //console.log(this.city);
      }
      const axios = require('axios');
      let data = JSON.stringify({
        "city": this.city
      });
      let config = {
        method: 'post',
        maxBodyLength: Infinity,
        url: 'http://8.134.215.31:11112/selectPage/gethot',
        headers: {
          'Content-Type': 'application/json'
        },
        data: data
      };

      axios.request(config)
        .then((response) => {
          //console.log(JSON.stringify(response.data));
          var that = response.data.data;
          this.hotList = that;
        })
        .catch((error) => {
          console.log(error);
        });

    },

    changeShow() {
      if (this.value > 0) {

        document.querySelector(".inp1").style.visibility = "visible";
        this.showBox = true;
      }
      else {

        document.querySelector(".inp1").style.visibility = "hidden";
        this.showBox = false;
      }
      this.input = '';
      if (this.name != '' && this.name1 != '' && this.value == 0) {
        this.canClick = false;
      }
      else {
        this.canClick = true;
      }
    },


    changeInput1() {
      if (this.name != '' && this.name1 != '' && this.value == 1 && this.box.length != 0 && this.input1 != '') {
        this.canClick = false;
      }
      else {
        this.canClick = true;
      }
      if (this.input1 > 10) {
        alert("最大时间只能为10天")
        this.input1 = ''
      }
    },

    handleSelect() {
      if (this.value == 0) {
        this.showAttr = true;
        console.log(this.city);
        const axios = require('axios');
        let _this = this;
        let data = JSON.stringify({
          "city": _this.city
        });

        let config = {
          method: 'post',
          maxBodyLength: Infinity,
          url: 'http://8.134.215.31:11112/selectPage/getscene',
          headers: {
            'Content-Type': 'application/json'
          },
          data: data
        };

        axios.request(config)
          .then((response) => {
            //console.log(JSON.stringify(response.data));
            var that = response.data.data;
            _this.selectSceneResult = that;
          })
          .catch((error) => {
            console.log(error);
          });
      }
      else {
        this.showAttr = false;
        //console.log(this.city,this.box,this.input1);
        let _this = this;
        const axios = require('axios');
        let data = JSON.stringify({
          "city": _this.city,
          "userChoosingScenes": _this.box,
          "days": _this.input1
        });

        let config = {
          method: 'post',
          maxBodyLength: Infinity,
          url: 'http://8.134.215.31:11112/selectPage/getscheme',
          headers: {
            'Content-Type': 'application/json'
          },
          data: data
        };

        axios.request(config)
          .then((response) => {
            //console.log(JSON.stringify(response.data));
            var that = response.data.data;
            _this.selectSchemeResult = that;
            //console.log(this.selectSchemeResult);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },

    enterDetail(index) {
      if (this.value == 0) {
        this.$router.push(`/home/concreteScene/${this.selectSceneResult[index].name}/${this.userId}/${this.selectSceneResult[index].id}/${this.selectSceneResult[index].city}`);
      }
      else {
        //console.log(this.selectSchemeResult);
        this.$router.push({
          name: 'schemePage',
          query: {
            selectSchemeResult: this.selectSchemeResult[index],
            userId: this.userId,
          }
        });
      }
    },
  },

  mounted() {
    this.hqy();
    document.querySelector(".inp1").style.visibility = "hidden";
    if (window.history && window.history.pushState) {
      window.onpopstate = function () {
        window.history.pushState("forward", null, "");
        window.history.forward(1);
      };
    };

    window.history.pushState("forward", null, "");
    window.history.forward(1);

    let config =
    {
      method: 'get',
      maxBodyLength: Infinity,
      url: 'https://restapi.amap.com/v3/config/district?key=15db71050eb2c5659a33248b052f6fd8',
      headers: {}
    }
    axios.request(config)
      .then((response) => {
        var that = response.data;
        this.province = that.districts[0].districts;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};

</script>
<style scoped>
.body {
  user-select: none;
  height: auto;
  min-height: 1000px;
  width: 100%;
}

.container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
  background-color: white;
  background-size: 100% 100%;
}

.ass {
  display: flex;
  margin: 20px auto;
  margin-bottom: 40px;
  justify-content: space-around;
  width: 50%;
}

.hot {
  display: flex;
  margin: 10px auto;
  margin-bottom: 40px;
  justify-content: space-around;
  width: 70%;
}

.suck {
  display: flex;
  margin: 20px auto;
  justify-content: space-around;
  width: 50%;
}

.sucker {
  width: 221px;
}

.el-input {
  width: 221px;
}

.result {
  overflow: auto;
  width: 60%;
  height: auto;
  min-height: 800px;
  margin: 0 auto;
}

.childResult {
  display: flex;
  top: 50px;
  overflow: hidden;
  width: 99%;
  height: 250px;
  background-color: white;
  margin-bottom: 50px;
  border: 1px rgba(128, 128, 128, 0.5) solid;
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.childResult:hover {
  cursor: pointer;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

.pic {
  flex: 40%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  height: 85%;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin: auto 12px;
}

.spacer {
  flex: 5%;
}

.text {
  flex: 55%;
  height: 100%;
}

.spacer1 {
  flex: 15%;
}

.text1 {
  flex: 70%;
  height: 100%;
}

p {
  text-align: center;
  margin: 95px auto;
  font-size: 40px;
}

.spacer2 {
  flex: 15%;
}
</style>